Table

Table UI – Cells and Structure

The Table component in Emvi UI helps organize data-dense content with semantic structure and visual clarity. It supports responsive layouts, horizontal scrolling, and precise alignment between columns and headers.

Table Cells

Each table cell (<td> and <th>) is optimized to host text, icons, buttons, or other components. Cells support custom alignment (start, center, end), density, borders, and background styling based on visual hierarchy.

Semantic Structure

Tables are built using semantic HTML (<table>, <thead>, <tbody>, <tr>, <th>, <td>) and are fully accessible with support for scope, aria-sort, and role="columnheader" attributes.

Display Modes

Variants include: Compact table, Zebra striped table, Scrollable table, and Responsive mobile-friendly table blocks.

Integration and Styling

Each table part is available as a reusable component in Figma and via Tailwind utility classes. You can combine cells with tags, buttons, badges, or chips to enrich interaction without losing structure.